<template>
  <div class="container">
    <headerNav></headerNav>
    <div class="content mindWidth">
      <!-- 面包屑 -->
      <div class="crumb">
        <span class="crumb-span" @click="$router.push('/')">首页</span>>
        <span class="crumb-span">政策图谱</span>
      </div>
      <!-- 地图、右侧统计数据 -->
      <div class="map-content">
        <div class="map-title flex items-middle">
          <img src="../../assets/PolicyDataCenter.png" alt />
          <h2>政策数据中心</h2>
        </div>
        <div class="map-info flex items-middle space-between">
          <mapChart ref="mapChart" :province="province" :city="city"></mapChart>
          <div class="statis">
            <PolicyStatistics
              :mapCity="city"
              :mapCityType="mapCityType"
              :mapActProvince="province"
              :mapActCity="city"
            ></PolicyStatistics>
          </div>
        </div>
      </div>
      <!-- 柱状图统计数据 -->
      <div class="chart-box">
        <div class="select-list">
          <div class="select-item flex flex-start">
            <div class="item-lable">地区：</div>
            <div class="item-info" ref="cityMore">
              <span class="active">{{ city }}</span>
            </div>
          </div>
          <div class="select-item flex flex-start">
            <div class="item-lable">部门：</div>
            <div class="item-info" ref="deparMore">
              <span @click="departActive(-1,'')" :class="departLevel === -1 ? 'active' : ''">全部</span>
              <span
                :class="departLevel === index ? 'active' : ''"
                v-for="(item, index) in departmentData"
                :key="index"
                @click="departActive(index,item)"
              >{{ item.departmentName }}</span>
            </div>
            <div v-if="judgeWords(departmentData,4)" class="more" @click="MoreEvent('deparMore')">
              <span ref="deparMore1">更多</span>
              <img ref="deparMore2" src="@/static/image/triangle.png" />
            </div>
          </div>
        </div>
        <!-- 柱状图 -->
        <div class="chart-bottom">
          <dataStatistics ref="policyReference"></dataStatistics>
        </div>
      </div>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>
<script>
import axios from "axios";
import { getMapCode } from "../../util/mapCode.js";
import { getPolicyAtlas } from "../../api/api.js";
import mapChart from "./component/mapChart.vue";
import PolicyStatistics from "../../components/echarts/PolicyStatistics.vue";
import dataStatistics from "../../components/echarts/dataStatistics.vue";
import { sessionTake } from "../../util/validate.js";
import {
  commonRequest,
  queryRegionDepartmentInfo,
  getAllDepartmentArea,
  getSubInfo
} from "../../api/api.js";
export default {
  name: "fenPolicyMap",
  components: {
    mapChart,
    PolicyStatistics,
    dataStatistics
  },
  data() {
    return {
      departLevel: -1,
      departmentData: [],
      departmentId: null,
      regionData: [], //所有政策通知地区
      chartArea: [], //获取柱状图需传地区
      mapCode: "",
      mapName: "",
      mapData: [],
      province: "",
      city: "",
      area: "",
      mapCityType: 2
    };
  },
  mounted() {
    this.getFenCity();
    this.getDepartment();
    this.getAllArea();
  },
  methods: {
    async getFenCity() {
      this.city = sessionTake("cityName"); // 城市名
      this.province = sessionTake("provinceName"); //省份名
      this.$refs.mapChart.getCode(this.province, this.city);
    },
    // 获取政策通知所有地区 type 0通知 1解读
    async getAllArea() {
      let areaData = await getAllDepartmentArea(0);
      if (areaData.code === 200) {
        this.regionData = areaData.result;
        let data = this.regionData;
        for (let i = 0; i < data.length; i++) {
          if (data[i].province == this.province) {
            for (let q = 0; q < data[i].city.length; q++) {
              if (data[i].city[q].name == this.city) {
                this.chartArea = data[i].city[q].area;
                this.getChart();
                break;
              } else if (q + 1 == data[i].city.length) {
                break;
              }
            }
          }
        }
      }
    },
    // 获取地区部门
    async getDepartment() {
      let deParams = {
        province: this.province,
        city: this.city,
        area: "",
        pageNo: 1,
        pageSize: 10
      };
      const deData = await queryRegionDepartmentInfo(deParams);
      this.departmentData = deData.result;
    },
    // 部门切换
    departActive(index, item) {
      this.departLevel = index;
      if (index === -1) {
        this.departmentId = null;
      } else {
        this.departmentId = item.id;
      }
      this.getChart();
    },
    getChart() {
      this.$refs.policyReference.dataRequest(
        null,
        this.city,
        null,
        this.departmentId,
        this.chartArea,
        this.province,
        this.city
      );
    },
    // 更多收起切换
    MoreEvent(value) {
      if (this.$refs[value + "1"].innerHTML === "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    },
    // 判断字符长度，是否要展示折叠
    judgeWords(data, index) {
      if (data == undefined) {
        return false;
      }
      if (index == 4) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].departmentName;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  .content {
    .map-content {
      .map-title {
        img {
          width: 18px;
        }
        h2 {
          color: #333333;
          margin-left: 22px;
        }
      }
      .map-info {
        .statis {
          width: 35%;
        }
      }
    }
    .chart-box {
      .select-list {
        width: 100%;
        .select-item {
          padding: 10px 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #eee;
          overflow: hidden;
          position: relative;
          .item-lable {
            width: 75px;
            text-align: center;
            font-size: 14px;
            color: #333;
            padding-top: 5px;
            box-sizing: border-box;
          }
          .item-info {
            width: 1035px;
            overflow: hidden;
            max-height: 32px;
            span {
              display: inline-block;
              font-size: 14px;
              padding: 2px 6px;
              margin: 3px 14px;
              background-color: #fff;
              color: #333;
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              img {
                width: 16px;
                position: absolute;
                right: -2px;
                top: -2px;
              }
            }
            .active {
              background-color: #44a2ff;
              color: #fff;
              position: relative;
              overflow: hidden;
              border-radius: 4px;
              img {
                width: 16px;
                position: absolute;
                right: -2px;
                top: -2px;
              }
            }
          }
          .more {
            width: 50px;
            font-size: 14px;
            color: #44a2ff;
            padding-top: 5px;
            box-sizing: border-box;
            img {
              width: 8px;
              height: 6px;
              display: inline-block;
            }
          }
          .select-input {
            .item-lable {
              width: 58px;
            }
            .key-input {
              margin-left: 10px;
              input {
                width: 240px;
                height: 32px;
                background: #ffffff;
                border: 1px solid #daeaf5;
                border-radius: 4px 0px 0px 4px;
                padding-left: 12px;
                box-sizing: border-box;
                &::-webkit-input-placeholder {
                  color: #aaa;
                }
              }
              span {
                display: inline-block;
                width: 60px;
                height: 32px;
                line-height: 32px;
                background: #44a2ff;
                border-radius: 0px 4px 4px 0px;
                text-align: center;
                color: #fff;
                cursor: pointer;
              }
            }
          }
          .policy-map {
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #44a2ff;
            border-radius: 4px;
            text-align: center;
            color: #fff;
            cursor: pointer;
          }
        }
      }
      .chart-bottom {
        width: 100%;
        height: 260px;
      }
    }
  }
}
</style>